<template>
    <div>
        <!-- 获取临时密码 -->
        <Modal
            :width="600"
            title="获取临时密码"
            v-model="isVisible"
            class-name="license-modal">
            <div v-if="isLoading">
                <Card  v-if="outLock">
                    <Row type="flex" align="middle" style="margin-bottom: 5px;">
                        <Col span="12" style="text-align: center;font-size: 16px;">
                            公区门锁临时密码：
                        </Col>
                        <Col span="12">{{pdwOut.info}}</Col>
                    </Row>
                    <Row type="flex" align="middle" style="margin-bottom: 5px;">
                        <Col span="12" style="text-align: center;font-size: 16px;">
                            密码失效时间：
                        </Col>
                        <Col span="12" v-show="pdwOut.time">{{toTime(pdwOut.time)}}</Col>
                    </Row>
                </Card>

                <Card  v-if="innerLock">
                    <Row type="flex" align="middle" style="margin-bottom: 5px;">
                        <Col span="12" style="text-align: center;font-size: 16px;">
                            房间 {{lockDetail.roomName}} 门锁临时密码
                        </Col>
                        <Col span="12">{{pdwIn.info}}</Col>
                    </Row>
                    <Row type="flex" align="middle" style="margin-bottom: 5px;">
                        <Col span="12" style="text-align: center;font-size: 16px;">
                            密码失效时间：
                        </Col>
                        <Col span="12" v-show="pdwIn.time">{{toTime(pdwIn.time)}}</Col>
                    </Row>
                </Card>

                <Card  v-if="!innerLock && !isPublic">
                    <Row type="flex" align="middle" style="margin-bottom: 5px;">
                        <Col span="12" style="text-align: center;font-size: 16px;">
                            房间 {{lockDetail.roomName}}门锁临时密码:
                        </Col>
                        <Col span="12">当前房租已出租，为保障租客安全，无法获取临时密码。租客可在支付宝中搜索“简单住”登录后自行获取临时密码</Col>
                    </Row>
                </Card>
            </div>

            <div v-else class="spin">
                 <Spin size="large"></Spin>
            </div>
           

            <div slot="footer">
                <Button type="info" @click="closeGetPwddayjs">关闭</Button>
                <Button type="info" @click="getInnerPassword" v-if="isShowBtn">我已知悉相关风险，继续获取</Button>
            </div>
        </Modal>

        <Modal
            :width="600"
            title="获取临时密码"
            v-model="isShowPermissionModal"
            class-name="license-modal">
            
            <p>权限受限，租客入住后如需强制获取临时密码，请联系商户超级管理员修改帐号所属角色的权限范围</p>

            <div slot="footer">
            </div>
        </Modal>
    </div>
</template>

<script>
import { http, api } from '@/libs/http'
import dayjs from 'dayjs'

export default {
  name: 'licenseRecord',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    lockDetail: {
      required: true
    }
  },
  data () {
    return {
      isShowPermissionModal: false, // 是否打开权限受限弹窗
      isPublic: false, // 是否是公区
      isLoading: false,
      havedIn: false, // 房间是否已出租
      pdwOut: {
        info: '', // 外门锁临时密码
        time: '' // 外门锁临时密码期限
      },
      pdwIn: {
        info: '', // 内门锁临时密码
        time: '' // 内门锁临时密码期限
      },
      outLock: false,
      innerLock: false,
      lease_id: ''
    }
  },
  watch: {
    isVisible (value) {
      if (value) {
        this.getPwddayjs()
      } else {
        this.reset()
      }
    }
  },
  computed: {
    // 是否展示强制获取临时密码按钮（按照接口数据和权限组）
    isShowBtn () {
      return !this.innerLock && !this.isPublic
    },
    isVisible: {
      get: function () {
        return this.visible
      },

      set: function () {
        this.$emit('on-close')
      }
    }
  },
  methods: {
    reset () {
      this.outLock = false
      this.innerLock = false
      this.havedIn = false
      this.isPublic = false
    },

    // 获取内门锁密码
    getInnerPassword () {
      this.isLoading = false
      let deviceId = this.lockDetail.id
      http.request(this, api.password_dynamic_force, [this.lease_id, deviceId], null, (res, err) => {
        this.isLoading = true

        if (err || !res) {
          this.isVisible = false
          this.isShowPermissionModal = true
          return
        }

        const { password, invalid_time } = res.room

        this.pdwIn = {
          info: password,
          time: invalid_time
        }
        this.innerLock = true
      }, true)
    },

    // 获取临时密码
    getPwddayjs () {
      let roomId = this.lockDetail.roomId
      let deviceId = this.lockDetail.id
      this.isLoading = false

      // console.log(roomId, deviceId);

      http.request(this, api.password_dynamic, [roomId, deviceId], null, (res, err) => {
        if (err || !res) {
          return
        }

        this.isLoading = true
        const { lease_id, room } = res

        if (res.public) {
          const { password, invalid_time } = res.public

          this.pdwOut = {
            info: password,
            time: invalid_time
          }

          this.outLock = true
        }

        if (lease_id) {
          this.innerLock = false
          this.lease_id = lease_id
        } else {
          this.isPublic = true // 是公区
        }

        if (room) {
          const { password, invalid_time } = room

          this.pdwIn = {
            info: password,
            time: invalid_time
          }
          this.innerLock = true
        }
      })
    },

    toTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm')
    },

    // 关闭获取临时密码modal
    closeGetPwddayjs () {
      this.isVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.license-modal {
    position: relative;
}
.spin {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>